<template>

    <div class="bht-header-fixed">
        <div class="header-content">

            <img class="header-logo" :src="logoUrl" alt="logo">

            <div class="header-nav">
                <a
                    :class="[
                        isIndex && item.title === '首页'
                        ? 'nav-item activited'
                        : item.url === pathname ? 'nav-item activited' : 'nav-item'
                    ]"
                    v-for="(item,index) in webInfoData.webDhlj"
                    :key="index"
                    @click="tabClick(item)"
                >
                    <span class="nav-title">{{item.title}}</span>
                    <div
                        class="child-cntent"
                        v-if="!!item.clild && item.clild.length > 0"
                    >
                        <a
                            v-for="(cItem,cIndex) in item.clild"
                            :key="cIndex"
                            @click="tabClick(cItem)"
                        >
                            {{cItem.title}}
                        </a>
                    </div>
                </a>
            </div>

            <div class="header-contact">
                <div class="tel">
                    <i class="iconfont">&#xebd3;</i>
                    <div>
                        <div>{{webInfoData.phone1}}</div>
                        <div v-if="webInfoData.phone2 != ''">{{webInfoData.phone2}}</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</template>
<script>
import { mapGetters, mapMutations, mapActions} from 'vuex';
export default {
    name: 'bht-header-fixed',
    components: {
    },
    data () {
        return {
        }
    },
    computed: {
        ...mapGetters({
            webInfoData:'webInfoData'
        }),

        logoUrl:function () {
            if(!!this.webInfoData.logoUrl){
                return this.webInfoData.logoUrl
            }
 
        },

        isIndex:function(){
            return true;
        },

        pathname:function(){
            return '';
        },
    },
    watch: {
    },
    methods: {
        tabClick(item){

        },
    },
    created () {
    },
    mounted () {
       
    },
}
</script>
<style lang="scss" scoped>
    @import '@css/var.scss';

    .bht-header-fixed{
        position: fixed;
        height:$defBhtHeaderFixedHeight;
        top:0;
        width: 100%;
        background: white;
        display: flex;
        justify-content: center;
        z-index:999;

        
        .header-content{
            width: 1200px;
            display: flex;
            align-items: center;
        }

        // logo
        .header-logo{
            flex-shrink: 0;
            height: 40px;
        }

        //导航
        .header-nav{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            .nav-item{
               display: block;
               cursor: pointer;
               font-size: 20px;
               margin-right: 20px;
               transition: all 0.3s;
               position: relative;

               .child-cntent{
                    display: none;
                    position: absolute;
                    left: 0 !important;
                    background-color: white;
                    border-radius: 5px;
                    box-shadow: 0 2px 15px 0 rgba(0,0,0,.3);
                    padding: 14px;
                }

                a{
                    color: black;
                    display: block;
                    font-size: 17px;
                    white-space: nowrap;
                    position: relative;
                    display: flex;
                    align-items: center;
                    transition: all 0.3s;
                }

                a:hover{
                    color: #ff5500;
                }

            }

            .nav-item:hover{
                color: #ff5500;

                .child-cntent{
                    display: block;
                }
            }

            .nav-item:nth-last-child(1){
                margin-right: 0px;
            }


            .activited{
                color: #ff5500;
            }

        }

        //电话
        .header-contact{
            flex-shrink: 0;
            font-size: 16px;
            color: #ff5500;

            .tel{
                display: flex;
                align-items: center;
                font-size: 20px;
                
                .iconfont{
                    flex-shrink: 0;
                    font-size: 22px;
                    margin-right: 10px;
                }
            }

        }


    }
</style>
